<template>
  <div>
    <div style="margin-bottom: 10px; margin-left: 10px">
      <el-input style="width: 200px" placeholder="请输入标题" v-model="data.title"></el-input>
    </div>
    <div ref="editorContainer"></div>
    <el-button type="success" style="margin-top: 10px; margin-left: 10px" @click="uploadFeedback">确认上传反馈信息</el-button>
    <el-button type="primary" style="margin-top: 10px; margin-left: 80px" @click="DeleteFeedback" >确认删除回馈信息</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import E from 'wangeditor'
import TokenStorage from "../../utils/token.js";
import {ElMessage} from "element-plus";
import userApi from "../../apis/user.js"
const editorContainer = ref(null);
const editor = ref(null);
const data = ref({
  title: '',
  content: '',
  time:'',
  userid:'',
  author:'',
  resolved:'',
});
const feedback =ref({
  title: '',
  content: '',
  time:'',
  userid:'',
  author:'',
  resolved:''
})
onMounted(() => {
  editor.value = new E(editorContainer.value);
  editor.value.config.height = 420;
  editor.value.config.zIndex = 0;
  editor.value.config.onchange = function (newHtml) {
    console.log('change 之后最新的 html', newHtml);
    data.value.content=newHtml;
  };
  editor.value.config.onchangeTimeout = 500;
  editor.value.config.linkImgCallback = function (src) {
    console.log('图片 src ', src);
  };
  editor.value.config.onlineVideoCallback = function (video) {
    console.log('插入视频内容', video);
  };
  editor.value.config.pasteFilterStyle = false;
  editor.value.config.uploadImgServer = 'http://8.137.113.138:88/File/uploadImg';
  editor.value.config.withCredentials = true;
  editor.value.config.uploadFileName = 'myFileName';
  editor.value.config.uploadImgMaxSize = 5 * 1024 * 1024;
  editor.value.config.uploadImgMaxLength = 1;
  editor.value.config.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
      var url = result.data.url;
      // var url = `http://8.137.113.138:88/File/uploadImg/download?name=${result.data.url}`;
      console.log(url, 'urlurlurlurlurl');
      insertImg(url);
    },
  };
  editor.value.config.showLinkImgAlt = false;
  editor.value.config.showLinkImgHref = false;
  editor.value.create();
  GetFeedDataBY();
});
const uploadFeedback = () => {
  userApi.IsUserDetailExist().then(res=>{
    console.log(res.status);
    if(res.status===false){
      ElMessage.error({
        message:"请在个人信息管理当中设置个人的信息",
        duration: 1500,
      })
    }
    else{
      const currentTime = new Date();
      // 格式化时间为字符串，可以根据需要进行调整
      const formattedTime = currentTime.toLocaleString();
      data.value.time=formattedTime;
      data.value.userid=TokenStorage.get().id;
      if(!data.value.title){
        ElMessage.warning({
          message: '标题不可以为空',
          duration: 1500, // 设置显示时间为 1.5 秒
        });
      }
      else if(!data.value.content){
        ElMessage.warning({
          message: '富文本内容不可以为空',
          duration: 1500, // 设置显示时间为 1.5 秒
        });
      }
      else{
        data.value.resolved="false";
        console.log("777")
        console.log(data.value);
        userApi.InsertFeedback(data.value).then(res=>{
          console.log(res);
          console.log("666");
          console.log(res.status);
          if(res.status=='false'){
            ElMessage.warning({
              message:'回馈信息已存在请勿重复上传反馈信息',
              duration:1500,
            })
          }
          else{
            ElMessage.success({
              message:'成功上传反馈信息',
              duration:1500,
            })
          }
        })
      }
    }
  })
}
const GetFeedDataBY = () => {
    userApi.getSelfFeedDate().then(res=>{
      console.log(res);
      console.log(res.data);
      feedback.value.resolved=res.data.resolved;
      if (feedback.value.resolved===false){
        ElMessage.warning({
          message:'您的反馈暂未被处理',
          duration:1000,
        })
      }
      else{
        ElMessage.success({
          message:'您的反馈已经被解决，请查看回馈,若不满反馈可删除回馈并重新提交反馈',
          duration:2500,
        })
        data.value.title=res.data.title;
        data.value.content=res.data.content;
        feedback.value.author=res.data.author;
        feedback.value.time=res.data.time;
        feedback.value.title=res.data.title;
        feedback.value.content=res.data.content;
        console.log(res.data.content);
        editor.value.txt.html(res.data.content);
      }
    })
}
const DeleteFeedback = () => {
  if(feedback.value.resolved===false){
    ElMessage.warning({
      message:'您的反馈还尚未解决',
      duration:1500
    })
  }
  else if(feedback.value.resolved===true){
      userApi.DeleteFeedBackBYId().then(res=>{
        console.log(res);
      })
    ElMessage.success({
      message:'删除回馈成功,请刷新页面',
      duration:1500
    })
  }
}
</script>
